<template>
	<view>
		<view class="bg">
			<u-image :src="src" style="margin-top: 100rpx;" width="150rpx" height="220rpx"></u-image>
			<text class="u-font-xl">小英</text>
			<view class="loginBox">
				<p style="text-align: center; font-size: 50rpx;">欢迎登录</p>
				<br>
				<input class="input" v-model="form.username" label="用户名" placeholder="请输入用户名" required></input>
				<br>
				<input class="input" v-model="form.password" :password="true" label="密码" placeholder="请输入密码" required></input>
				<br>
				<br>
				<u-button class="button1" type="primary" @tap="login">登录</u-button>
				<br>
				<u-button class="button2" type="primary" @tap="torRegister">注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "https://iconfont.alicdn.com/t/f095981c-5192-46b5-824f-193a9fc00be0.png",
				form: {
					username: '',
					password: ''
				},
				isLoading: false,
			}
		},
		methods: {
			login() {
				if(this.form.username == getApp().globalData.name && this.form.password == getApp().globalData.passData){
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				else{
					uni.showToast({
						title:"账号或密码有误！"
					})
				}
			
				},
			torRegister() {
				uni.navigateTo({
					url: '/pages/regester/regester'
				})
			}
		}
	}
</script>

/*scoped 仅对当前页面生效*/
<style scoped>
	.bg {
		width: 100vw;
		height: 94vh;
		background-image: url(../../static/guide-1.jpg);
		background-size: cover;
		/* 将当前容器变为弹性容器 */
		display: flex;
		flex-direction: column;
		/* 主轴方向 */
		justify-content: center;
		/*  */
		align-items: center;
	}

	.loginBox {
		width: 500rpx;
		height: 650rpx;
		background-color: rgba(255, 255, 255, .7);
		/* 半透明 */
		margin: auto;
		/* 自动居中 */
		border-radius: 30rpx;
		/* 圆角 */
		padding: 30rpx;
		/* 内边距 */
		margin-top: 20rpx;
	}
	
	.input {
		border: 1rpx;
		height: calc(70rpx);
		border-style: solid;
		border-radius: 40rpx;
		text-align: center;
	}
	
	.button1 {
		background-color: #b4b4b4;
		border-radius: 30rpx;
		display: block;
		text-align: center;
		font-size: 35rpx;
		color: #FFFFFF;
	}
	
	.button2 {
		background-color: #b4b4b4;
		border-radius: 30rpx;
		display: block;
		font-size: 35rpx;
	}
</style>
